<script setup>

import {onBeforeUnmount, onMounted, ref} from "vue";
import {dayjs} from "element-plus";
import UserSalaryDialogView from "@/views/user/UserSalaryDialogView.vue";
import UserSignInDialogView from "@/views/user/UserSignInDialogView.vue";
import {addSalary} from "@/api/salary.js";

const salaryRecord = ref({});

const dialogVisible = ref(false);


const handleAddSalaryRecord = () => {
  dialogVisible.value = true;
}

const handleClose = () => {
  dialogVisible.value = false;
}

const saveSalaryRecord = async () => {
  // 发送请求保存工资记录
  salaryRecord.value.userId = props.userData.userId;
  await addSalary(salaryRecord.value)
  refCount.value++;
  dialogVisible.value = false;
}

const handleDateChange = (date) => {
  // 使用 dayjs 格式化日期
  salaryRecord.value.month = dayjs(date).format('YYYY-MM-DD');
}

const props = defineProps({
  userData: {
    type: Object,
    required: true
  }
});


onMounted(() => {});

const refCount = ref(0);



</script>

<template>
  <div>
    <el-dialog v-model="dialogVisible" title="添加工资记录" width="500" :before-close="handleClose">
      <div>
        <el-form ref="form" :model="salaryRecord" label-width="80px">
          <el-form-item label="基本工资">
            <el-input v-model="salaryRecord.baseSalary"></el-input>
          </el-form-item>
          <el-form-item label="绩效奖金">
            <el-input v-model="salaryRecord.bonus"></el-input>
          </el-form-item>
          <el-form-item label="扣款">
            <el-input v-model="salaryRecord.deductions"></el-input>
          </el-form-item>
          <el-form-item label="实发工资">
            <el-input v-model="salaryRecord.netSalary"></el-input>
          </el-form-item>
          <el-form-item label="发放日期">
            <el-date-picker v-model="salaryRecord.payDate" type="date" placeholder="选择日期"
                            @change="handleDateChange"></el-date-picker>
          </el-form-item>

<!--          <el-form-item label="备注">-->
<!--            <el-radio-group v-model="salaryRecord.remark">-->
<!--              <el-radio label="收入">收入</el-radio>-->
<!--              <el-radio label="支出">支出</el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
        </el-form>
        <div style="text-align: right; margin-top: 20px">
          <el-button type="primary" @click="saveSalaryRecord">添加</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <div class="user-details-item">
      <el-text type="primary">用户名:</el-text>
      <el-text type="primary">{{ userData.username }}</el-text>
    </div>
    <div class="user-details-item">
      <el-text type="primary">邮箱:</el-text>
      <el-text type="primary">{{ userData.email }}</el-text>
    </div>
    <div class="user-details-item" style="margin-top: 20px; margin-bottom: 20px">
      <el-button type="primary" @click="handleAddSalaryRecord" style="width: 100%">添加工资记录</el-button>
    </div>
    <div class="user-details-item" style="text-align: center">
      <el-text type="primary">工资记录表</el-text>
    </div>
    <div class="user-details-item">
      <UserSalaryDialogView :username="userData.username" :key="refCount"/>
    </div>
    <div class="user-details-item" style="text-align: center">
      <el-text type="primary">签到记录表</el-text>
    </div>
    <div class="user-details-item">
      <UserSignInDialogView :username="userData.username"/>
    </div>
  </div>
</template>

<style scoped>
.user-details-item {
  display: flex;

}


</style>
